<template>
  <div>
    <el-card shadow="never">
      <header-title title="缴费通知"></header-title>
    </el-card>
    <el-card shadow="never">
      <div>
        商户名称: <el-input v-model="searchForm.searchName" placeholder="请输入内容" size="small" style="margin: 0 15px 0 15px;width: 120px;" ></el-input>
        是否已缴费:<el-select v-model="searchForm.payStatus" @change="changePayStatus" placeholder="请选择" size="small" style="margin: 0 15px 0 15px;width: 120px;">
          <el-option :key="-1" label="全部" :value="-1"></el-option>
          <el-option :key="0" label="已缴" :value="0"></el-option>
          <el-option :key="1" label="未缴" :value="1"></el-option>
        </el-select>
        缴费类型:<el-select v-model="searchForm.payType" @change="changePayType" placeholder="请选择" size="small" style="margin: 0 15px 0 15px;width: 145px;">
          <el-option :key="-1" label="全部" :value="-1"></el-option>
          <el-option :key="1" label="水电" :value="1"></el-option>
          <el-option :key="2" label="房租" :value="2"></el-option>
          <el-option :key="3" label="垃圾费" :value="3"></el-option>
        </el-select>
        <el-button @click="search" class="button" size="small" round icon="el-icon-search">查询</el-button>
      </div>
    </el-card>
    <el-card shadow="never">
      <div>
        <el-table :data="paymentNoticeData" v-loading="loading" style="width: 100%">
          <el-table-column prop="marketName" label="市场名称"></el-table-column>
          <el-table-column prop="businessName" label="商户名称"></el-table-column>
          <el-table-column prop="stallName" label="摊位号"></el-table-column>
          <el-table-column prop="payTypeName" label="缴费项目"></el-table-column>
          <el-table-column prop="content" label="消息内容"></el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <!-- <el-button @click="details(scope.row)" type="text" style="color:#3dc2c2;">缴费通知详情</el-button> -->
              <el-tooltip content="点一下就直接删除了噢" placement="top">
                <el-button @click="deletePNotice(scope.row)" type="text" style="color:#f7674a;">删除</el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size="searchForm.perPage"
          :current-page="searchForm.page"
          :total="searchForm.total"
          @current-change="changePaymentNoticePage"
          style="margin-top: 15px;"
          background
          layout="prev, pager, next"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle"
export default {
  name: 'PaymentNotice',
  components: {
     HeaderTitle
  },
  data(){
    return {
      searchForm: {
        businessPayTheFeesMessageId: 0,
        searchName: '',
        payType: -1,
        payStatus: -1,
        perPage: 10, // 每页显示10条
        page: 1, // 当前页
        total: 0,
      },
      loading: true,
      paymentNoticeData: [],
    }
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      const query = this.$route.query.paymentNoticeSumDetails
      this.searchForm.businessPayTheFeesMessageId = query.businessPayTheFeesMessageId
      this.getPaymentNoticeList(this.searchForm)
    }
  },
  mounted(){
    const query = this.$route.query.paymentNoticeSumDetails
    this.searchForm.businessPayTheFeesMessageId = query.businessPayTheFeesMessageId
    this.getPaymentNoticeList(this.searchForm)
  },
  methods:{
    // 是否已缴费
    changePayStatus(val){
      this.searchForm.payStatus = val
    },
    // 缴费类型
    changePayType(val){
      this.searchForm.payType = val
    },
    // 获取缴费通知列表
    getPaymentNoticeList(searchForm){
      this.$store.dispatch('payment/fetchPaymentNoticeData',searchForm).then(
        data => {
          this.loading = false
          this.paymentNoticeData = data.items
          this.searchForm.total = data.total
        }
      ).catch(err => {
        this.loading = false
        this.paymentNoticeData = []
        this.searchForm.total = 0
      })
    },
    search(){
      this.searchForm.page = 1
      this.getPaymentNoticeList(this.searchForm)
    },
    changePaymentNoticePage(num){
      this.searchForm.page = num
      this.getPaymentNoticeList(this.searchForm)
    },
    // 删除缴费通知
    deletePNotice(row){
      const businessPayTheFeesMessageDetailId = row.businessPayTheFeesMessageDetailId
      this.$store.dispatch("payment/fetchDeletePNotice", {businessPayTheFeesMessageDetailId}).then(data=>{
        if(data){
          this.$message({
            type: 'success',
            message: '删除成功，请刷新页面！'
          })
        }
        this.getPaymentNoticeList(this.searchForm)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.button {
  background: #64d9d6;
  color: #fff;
  margin-left: 40px;
}
</style>
